App.require(function () {
    var app = App.getCurrent();

    app.definePage("strpctimeselect", {
        getDomObj: function () {
            this.attachDom(".select-hour", "selectHour")
                .attachDom(".select-timer-container", "container")
                .attachDom(".select-minute", "selectMinute")
                .attachDom(".select-hour ul", "selectHourUl")
                .attachDom(".select-minute ul", "selectMinuteUl")
                .attachDom(".select-hour li.selected", "hourSelected")
                .attachDom(".select-minute li.selected", "minuteSelected")
                .attachEvent("selectHour", "click", this.clickHourHandler, false)
                .attachEvent("selectHour", "mousewheel", this.wheelHourHandler, false)
                .attachEvent("selectHour", "DOMMouseScroll", this.scrollHourHandler, false)
                .attachEvent("selectHour", "iconclick", this.iconClickHourHandler, false)
                .attachEvent("selectMinute", "mousewheel", this.wheelMinuteHandler, false)
                .attachEvent("selectMinute", "DOMMouseScroll", this.scrollMinuteHandler, false)
                .attachEvent("selectMinute", "iconclick", this.iconClickMinuteHandler, false)
                .attachEvent("selectMinute", "click", this.clickMinuteHandler, false);
        },
        wheelHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(ev.wheelDelta);
        },
        scrollHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(-ev.delta);
        },
        wheelMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateMinute(ev.wheelDelta);
        },
        scrollMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateMinute(-ev.delta);
        },
        render: function (next) {
            this.data.time = this.parent.data.time;
            this.data.selectHoursHtml = this.computedHours();
            this.data.selectMinutesHtml = this.computedMinutes();
            this.data.hourStyle = "transform: translateY(" + (3 - this.data.time.hour) * 28 + "px)";
            this.data.minuteStyle = "transform: translateY(" + (3 - this.data.time.minute) * 28 + "px)";
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        computedHours: function () {
            var hour = this.data.time.hour;
            var html = "";
            for (var i = 0; i < 24; i++) {
                var str = ("0" + i).slice(-2);
                if (i == hour) html += '<li class="selected">' + str + '</li>';
                else html += '<li>' + str + '</li>';
            }
            return html;
        },
        computedMinutes: function () {
            var minute = this.data.time.minute;
            var html = "";
            for (var i = 0; i < 60; i++) {
                var str = ("0" + i).slice(-2);
                if (i == minute) html += '<li class="selected">' + str + '</li>';
                else html += '<li>' + str + '</li>';
            }
            return html;
        },
        iconClickHourHandler: function (ev) {
            var component = ev.detail.component;
            if (component.dataset.action == "down") {
                this.operateHour(1);
            }
            else if (component.dataset.action == "up") {
                this.operateHour(-1);
            }
        },
        operateHour: function (num) {
            if (num > 0) {
                if (this.data.time.hour < 23) this.data.time.hour++;
            }
            else {
                if (this.data.time.hour > 0) this.data.time.hour--;
            }
            this.domList.selectHour.querySelector("ul").style.transform = 'translateY(' + (3 - this.data.time.hour) * 28 + 'px)';
            this.parent.staticPage.changeTimeStr();
            this.domList.hourSelected.classList.remove("selected");
            this.resetSelectHour();
        },
        operateMinute: function (num) { 
            if (num > 0) {
                if (this.data.time.minute < 59) this.data.time.minute++;
            }
            else {
                if (this.data.time.minute > 0) this.data.time.minute--;
            }
            this.domList.selectMinute.querySelector("ul").style.transform = 'translateY(' + (3 - this.data.time.minute) * 28 + 'px)';
            this.parent.staticPage.changeTimeStr();
            this.domList.minuteSelected.classList.remove("selected");
            this.resetSelectMinute();
        },
        iconClickMinuteHandler: function (ev) {
            var component = ev.detail.component;
            if (component.dataset.action == "down") {
                this.operateMinute(1);
            }
            else if (component.dataset.action == "up") {
                this.operateMinute(-1);
            }
        },
        resetSelectHour: function () {
            var hour = this.data.time.hour;
            var target = this.domList.selectHourUl.children[hour + 3]
            target.classList.add("selected");
            this.domList.hourSelected = target;
        },
        resetSelectMinute: function () {
            var minute = this.data.time.minute;
            var target = this.domList.selectMinuteUl.children[minute + 3]
            target.classList.add("selected");
            this.domList.minuteSelected = target;
        },
        clickHourHandler: function (ev) {
            var target = ev.target;
            if (target.nodeName.toUpperCase() == "LI") {
                this.data.time.hour = parseInt(ev.target.textContent);
                this.parent.staticPage.changeTimeStr();
                target.parentNode.style.transform = 'translateY(' + (3 - this.data.time.hour) * 28 + 'px)';
                this.domList.hourSelected.classList.remove("selected");
                target.classList.add("selected");
                this.domList.hourSelected = target;
            }
        },
        clickMinuteHandler: function (ev) {
            var target = ev.target;
            if (target.nodeName.toUpperCase() == "LI") {
                this.data.time.minute = parseInt(ev.target.textContent);
                this.parent.staticPage.changeTimeStr();
                target.parentNode.style.transform = 'translateY(' + (3 - this.data.time.minute) * 28 + 'px)';
                this.domList.minuteSelected.classList.remove("selected");
                target.classList.add("selected");
                this.domList.minuteSelected = target;
            }
        }
    })
})